import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// 图标组件，使用文字代替图标
// 在实际项目中，可以使用react-native-vector-icons库替换
const TabBarIcon = ({ name, focused }: { name: string; focused: boolean }) => {
  // 根据不同的name返回不同的图标
  const getIconContent = () => {
    switch (name) {
      case 'home':
        return '首';
      case 'store':
        return '店';
      case 'profile':
        return '我';
      default:
        return '图';
    }
  };

  return (
    <View style={[styles.iconContainer, focused && styles.focusedIcon]}>
      <Text style={[styles.iconText, focused && styles.focusedText]}>
        {getIconContent()}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  iconContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
  },
  focusedIcon: {
    backgroundColor: 'rgba(0, 102, 204, 0.1)',
    borderRadius: 12,
    padding: 5,
    width: 30,
    height: 30,
  },
  iconText: {
    fontSize: 16,
    color: '#999999',
  },
  focusedText: {
    color: '#0066cc',
    fontWeight: 'bold',
  },
});

export default TabBarIcon; 